import React, { useState } from 'react';
import { Button, Table } from 'antd';
import ParametersEditor from "./ParametersEditor";

const VariablesSetting = ({
  disable,
  value,
  modelVariableRef,
  openNotificationWithIcon,
  modelForms,
  onChange,
}) => {

  const [isEditting, setIsEditting] = useState(false);

  return (
    <>
      <Button
        onClick={() => setIsEditting(true)}
        type="primary"
        size="small"
        style={{ marginBottom: 16, marginLeft: 14 }}
        disabled={disable}
      >
        编辑
      </Button>
      <Table
        columns={[
          { title: "变量名称", dataIndex: "name" },
          { title: "变量编码", dataIndex: "code" },
        ]}
        rowKey="uuid"
        dataSource={value}
        pagination={{
          pageSize: 5,
        }}
      />
      {isEditting ? (
        <ParametersEditor
          modelVariableRef={modelVariableRef}
          value={value}
          handleOk={(v) => {
            onChange(v);
            setIsEditting(false);
          }}
          handleCancel={() => setIsEditting(false)}
          handleError={(msg) =>
            openNotificationWithIcon("error", "", msg)
          }
          modelForms={modelForms}
        />
      ) : null}
    </>
  );

}

export default VariablesSetting;